<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: MAOQIN
  Date: 2020/4/23
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>叶子mini微客</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/script/index.js"></script>
    <script type="text/javascript" src="/script/inHome.js"></script>
    <link rel="icon" href="/app/sea.ico"/>
    <style>
        body {
            background-image: url("/app/background.jpg");
            opacity: 88%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            padding-top: 60px;
            padding-bottom: 40px;
        }

        footer {
            color: red;
            font-size: 13px;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
        }

        .RightColumn {
            opacity: 88%;
            width: 350px;
            margin-right: -20px;
        }

        .RightColumn .RightBox {
                background-color: white;
                padding: 15px 15px 15px 10px;
        }
    </style>
</head>
<body onload="show()">
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">叶子迷你微客</a>
        </div>
        <div>
            <form class="navbar-form navbar-left" role="search" action="#" method="post" onsubmit="return false">
                <div class=" form-group has-feedback">
                    <span id="icon" class="form-control-feedback glyphicon glyphicon-search"></span>
                    <input type="text" id="search" class="form-control" placeholder="搜索" name="key"
                           onkeypress="searchArticle(this,event.keyCode||event.which)"
                           onkeydown="searchArticle(this,event.keyCode||event.which)">
                    <div style="display:inline-block;width:30px;height:35px;position:absolute;right:2px;z-index:100;cursor: pointer;"
                         onmouseenter="enterSearchIcon('icon','enter')" onmouseout="enterSearchIcon('icon','out')" ;
                         onclick="searchArticle(13)"></div>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页 </a></li>
                <li><a style="cursor:pointer;"><span
                        class="glyphicon glyphicon-user"></span>访客</a></li>
                <li><a data-toggle="modal" data-target="#register" href="#" id="navRegister"><span
                        class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a data-toggle="modal" data-target="#login" href="#" id="navLogin"><span
                        class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主页面 -->
<div class="container" style="margin-right: 5px;margin-top: 10px; width: inherit">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column" style="opacity: 88%;width: 55%">
            <c:if test="${empty articleList or articleList.size() eq 0}">
                <div style="background-color:white;padding-top:10px;height: 30%;position: center">
                    <h2 style="text-align: center;">暂时还没有动态，快点击<a data-toggle="modal" data-target="#login"
                                                                  href="#">登录</a>发布动态吧</h2>
                </div>
            </c:if>
            <!-- 分享内容 -->
            <div class="home_center_block_share" style="margin-top: -2%">
                <c:forEach items="${articleList}" var="article">
                    <c:if test="${not (article.authority eq 1)}">
                        <div class="share" style="background-color: white;margin-top: 2%;opacity: 88%">
                            <div class="share_head" style="width: 60px;height: 60px">
                                <div style="height: 35%;"></div>
                                <a href="" title="${article.sharedUser.name}"
                                   style="margin-left:25%;display: inline">
                                    <img class="img-circle"
                                         src="${article.sharedUser.headPictureUrl.substring(article.sharedUser.headPictureUrl.lastIndexOf("/head/"))}"
                                         width="60" height="60"
                                         alt="${article.sharedUser.name}" style="display: inline">
                                </a>
                            </div>
                            <div class="share_detail" style="margin-left: 13%;margin-top:-5%">
                                <font title="${article.sharedUser.name}"
                                      style="font-weight: bold">${article.sharedUser.name}</font><br/>
                                <a style="cursor: pointer" onclick="turnInArticle('${article.articleId}')">
                                    <small title="${article.releaseTime}">${article.releaseTime}</small>
                                </a>
                                <p style="display: block;margin-top: 1%;font-size: 16px;">${article.content}</p>
                                <c:forEach items="${article.pictureList}" var="picture">
                                    <img src="${picture.url.substring(picture.url.lastIndexOf('/'))}" width="150px"
                                         height="120px" style="display: inline;margin: 0.5%">
                                </c:forEach>
                            </div>
                            <hr style="margin-bottom: 0px;"/>
                            <div class="share_handle" style="margin-top: 2%;font-size: 15px">
                                <a style="margin-left: 15%;cursor: pointer;color:rgb(46,100,148)"
                                       data-toggle="modal" data-target="#login">
                                        <span class="glyphicon glyphicon-star-empty"
                                              style="color:rgb(46,100,148)"></span>收藏
                            </a>
                                <a style="margin-left: 20%;cursor: pointer" onclick="showComment(this)">
                                    <span class="glyphicon glyphicon-comment" style="color:rgb(46,100,148)"></span>
                                    评论(${article.commentCount})
                                </a>
                                <a style="margin-left: 23%;cursor: pointer;color:rgb(46,100,148)"
                                   data-toggle="modal" data-target="#login">
                                        <span class="glyphicon glyphicon-thumbs-up"
                                              style="color:rgb(46,100,148)"></span>
                                        ${article.likeNum}
                                </a>
                            </div>
                            <div class="share_comment" style="display: none;">
                                <hr/>
                                <form method="post" action="#" enctype="multipart/form-data"
                                      onsubmit="return false">
                                    <input type="hidden" name="userName" value="${user.name}">
                                    <img src="/app/initHeadPic.png" width="30px" height="30px"
                                         style="display: inline;margin: 0.5% 1% 1% 2%;">
                                    <input type="text" name="comment" style="width: 60%;height: 5%"
                                           maxlength="100"
                                           autocomplete="off">
                                    <input type="hidden" name="userId" value="${user.userId}">
                                    <input type="hidden" name="articleId" value="${article.articleId}">
                                    <button type="button" class="btn btn-primary btn-danger"
                                            data-toggle="modal" data-target="#login">评论
                                    </button>
                                </form>
                                <div class="commentList">
                                    <c:forEach items="${article.commentList}" var="comment">
                                        <hr style="margin: 2px 0px 2px"/>
                                        <div style="display: block">
                                            <img src="${comment.commentUser.headPictureUrl.substring(comment.commentUser.headPictureUrl.lastIndexOf("/head/"))}"
                                                 width="30px" height="30px"
                                                 style="margin: 0.5% 1% 1% 2%;display: inline"/>
                                            <p style="color: red;font-size: 10px;display: inline">${comment.commentUser.name}： </p>
                                            <p style="display: inline">${comment.content}</p>
                                            <small style="display: block;margin-left: 8%">${comment.commentTime}</small>
                                        </div>
                                    </c:forEach>
                                    <hr style="margin: 2px 0px 2px"/>
                                </div>
                            </div>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
        </div>
        <!-- 页面右边的登录框 -->
        <div class="col-md-4 column RightColumn">
            <div class="RightBox rightLogin">
                <form role="form" id="form" action="#" method="post" enctype="multipart/form-data"
                      onsubmit="return false">
                    <div>
                        <h3 style="position: center">帐号登录</h3>
                        <p id="errorMsg1" style="color:red;display: none">账号或密码错误</p>
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        <input type="text" class="form-control" name="userId" id="phoneForL" placeholder="请输入手机号码"
                               value="${userId1}" required/>
                    </div>
                    <div class="form-group has-feedback">
                        <span class=" glyphicon glyphicon-lock form-control-feedback"></span>
                        <input type="password" class="form-control" name="password" id="pswForL" placeholder="请输入密码"
                               value="${password}" required/>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" id="captchaForL1" placeholder="请输入验证码"
                               style="width: 70%;display: inline;">
                        <img id="loginform:vCode1" src="/getCode" style="display:inline;float: right;" title="看不清？点击换一张试试"
                             onclick="javascript:document.getElementById('loginform:vCode1'). src='/getCode?'+Math.random();"/>
                    </div>
                    <div class="checkbox">
                        <c:choose>
                            <c:when test="${password.length()>0}">
                                <label><input type="checkbox" name="check" checked
                                              title="选中后可保存密码，七天内直接登录"/>记住密码</label>
                            </c:when>
                            <c:otherwise>
                                <label><input type="checkbox" name="check" title="选中后可保存密码，七天内直接登录"/>记住密码</label>
                            </c:otherwise>
                        </c:choose>
                        <a data-toggle="modal" data-target="#register" href="" style="margin-left:145px">立即注册</a>
                    </div>
                    <input type="hidden" name="type" value="1">
                    <button type="button" class="btn btn-default btn-success btn-block"
                            onclick="login('phoneForL','pswForL','captchaForL1',1)">登录
                    </button>
                </form>
            </div>
            <div class="RightBox hotTopic" style="margin-top: 2%">
                <h3 class="hotTopic_title" title="只显示头七">微客点赞榜</h3>
                <hr/>
                <div class="HT_contents">
                    <c:forEach items="${hotArticleList}" var="article"
                               end="${hotArticleList.size()>7?7:hotArticleList.size()}">
                        <div class="HT_article" style="cursor: pointer;"
                             onclick="turnInArticle('${article.articleId}')">
                            <c:choose>
                                <c:when test="${article.pictureList.size()>0}">
                                    <img src="${article.pictureList.get(0).url.substring(article.pictureList.get(0).url.lastIndexOf('/'))}"
                                         alt="分享图片" style="width: 50px;height: 50px;display: inline">
                                </c:when>
                                <c:otherwise>
                                    <img src="${article.sharedUser.headPictureUrl.substring(article.sharedUser.headPictureUrl.lastIndexOf("/head/"))}"
                                         alt="分享图片" style="width: 50px;height: 50px;display: inline">
                                </c:otherwise>
                            </c:choose>
                            <div class="list_detail" style="display: inline;">
                                <c:choose>
                                    <c:when test="${article.content.length()>10}">
                                        <a style="color: black"><h4 style="display: inline;margin-left: 1%;">
                                            #${article.content.substring(0,10)}...</h4></a>
                                    </c:when>
                                    <c:otherwise>
                                        <a style="color: black"><h4 style="display: inline;margin-left: 1%;">
                                            #${article.content}#</h4></a>
                                    </c:otherwise>
                                </c:choose>
                                <div style="margin-left: 19%;margin-top: -5%;">${article.likeNum}人点赞 ${article.commentCount}条评论</div>
                            </div>
                        </div>
                        <br style="line-height: 30%;"/>
                    </c:forEach>
                </div>
            </div>
            <div class="RightBox" style="margin-top: 2%">
                <h3 class="hotTopic_title" title="只显示最新发布的五篇分享">微客最新发布</h3>
                <hr/>
                <div class="HT_contents">
                    <c:forEach items="${newestArticleList}" var="article">
                        <div class="HT_article" style="cursor: pointer;"
                             onclick="turnInArticle('${article.articleId}')">
                            <c:choose>
                                <c:when test="${article.pictureList.size()>0}">
                                    <img src="${article.pictureList.get(0).url.substring(article.pictureList.get(0).url.lastIndexOf('/'))}"
                                         alt="分享图片" style="width: 50px;height: 50px;display: inline">
                                </c:when>
                                <c:otherwise>
                                    <img src="${article.sharedUser.headPictureUrl.substring(article.sharedUser.headPictureUrl.lastIndexOf("/head/"))}"
                                         alt="分享图片" style="width: 50px;height: 50px;display: inline">
                                </c:otherwise>
                            </c:choose>
                            <div class="list_detail" style="display: inline;">
                                <c:choose>
                                    <c:when test="${article.content.length()>10}">
                                        <a style="color: black"><h4 style="display: inline;margin-left: 1%;">
                                            #${article.content.substring(0,10)}...</h4></a>
                                    </c:when>
                                    <c:otherwise>
                                        <a style="color: black"><h4 style="display: inline;margin-left: 1%;">
                                            #${article.content}#</h4></a>
                                    </c:otherwise>
                                </c:choose>
                                <div style="margin-left: 19%;margin-top: -5%;">${article.likeNum}人点赞 ${article.commentCount}条评论</div>
                            </div>
                        </div>
                        <br style="line-height: 30%;"/>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog" id="modal">
        <div class="modal-content">
            <div class="modal-body">
                <!-- 模式框右上角的关闭按钮 -->
                <button class="close" data-dismiss="modal" id="close" onclick="reset('registerForm')">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" id="registerForm" action="#" method="post" enctype="multipart/form-data"
                      onsubmit="return false">
                    <div class="form-group">
                        <span class="glyphicon glyphicon-user"></span>
                        <label for="userIdForR">帐号</label>
                        <input class="form-control" type="text" name="userId" id="userIdForR"
                               placeholder="手机号码注册">
                    </div>
                    <div class="form-group">
                        <span class="glyphicon glyphicon-lock"></span>
                        <label for="password1ForR">密码</label>
                        <input class="form-control" type="password" name="password" id="password1ForR"
                               placeholder="至少6位且不多于20位的字母或数字">
                    </div>
                    <div class="form-group">
                        <span class="glyphicon glyphicon-lock"></span>
                        <label for="password2ForR">再次输入密码</label>
                        <input class="form-control" type="password" name="confirmPassword" id="password2ForR"
                               placeholder="至少6位且不多于20位的字母或数字">
                    </div>
                    <div class="form-group">
                        <span class="glyphicon glyphicon-ok"></span>
                        <label for="mail">邮箱</label>
                        <input class="form-control" type="email" name="mail" id="mail" placeholder="例如:123@123.com">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="button" id="submit" onclick="register()">提交
                        </button>
                        <button class="btn btn-danger" data-dismiss="modal" onclick="reset('registerForm')">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 登录窗口 -->
<div id="login" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal" onclick="reset('loginForm')">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">登录</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="#" method="post" enctype="multipart/form-data" onsubmit="return false"
                      id="loginForm">
                    <div class="form-group">
                        <span class="glyphicon glyphicon-user"></span>
                        <label for="userIdForL">用户名</label>
                        <input class="form-control" type="text" name="userId" id="userIdForL" placeholder="请输入手机号码"
                               value="${userId2}" required>
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-lock"></span>
                        <label for="passwordForL">密码</label>
                        <input class="form-control" type="password" name="password" id="passwordForL"
                               value="${password}" placeholder="请输入密码" required>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="captchaForL2" style="display: block;">验证码</label>
                        <input type="text" class="form-control" id="captchaForL2" placeholder="请输入验证码"
                               style="width: 80%;display: inline;">
                        <img id="loginform:vCode2" src="/getCode" style="display:inline;float: right;" title="看不清？点击换一张试试"
                             onclick="javascript:document.getElementById('loginform:vCode2'). src='/getCode?'+Math.random();"/>
                    </div>
                    <p id="errorMsg2" style="color: red;display: none">账号或密码错误</p>
                    <div class="text-right">
                        <button class="btn btn-primary" type="button" id="loginSubmit"
                                onclick="login('userIdForL','passwordForL','captchaForL2',2)">登录
                        </button>
                        <button class="btn btn-danger" data-dismiss="modal" onclick="reset('loginForm')">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>
